<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				{{orderInfo.startRegion}} <text class=" myIcon-jiantou padding-lr-xs"></text> {{orderInfo.endRegion}}
			</block>
		</cu-custom>
		<!--前一天后一天-->
		<view class="cu-bar bg-white top-line min-height35">
			<view class="action" @click="beforeDay">
				<text class="cuIcon-back text-gray"></text> 前一天
			</view>
			<view style=" background-color: #ffdf40; border-radius: 8upx;">
				<picker mode="date" :value="date" :start="startTime" :end="endTime" @change="DateChange" style="padding-right: 0px">
					<view class="flex align-center">
						<view style="margin: 8upx">{{date}} {{speedWeek}}</view>
						<view style="height: 22px; max-height: 22px border-left: 1px; border-right-style: solid; transform: scaleX(.333)"></view>
						<view style="margin: 8upx" class="cuIcon-calendar"></view>
					</view>
				</picker>
			</view>
			<view class="action" @click="nextDay">
				后一天 <text class="cuIcon-right text-gray"></text>
			</view>
		</view>

		<view>
			<block v-for="(speed) in speedList">
				<search-item :speedInfo="speed" @goSearchItem="goSearchItem"></search-item>
			</block>
		</view>

		<view class="bottom-fix bg-white top-line flex justify-around align-center" :class="showCond">
			<view class="cu-bar bg-white tabbar top-line width100">
				<view class="action" @click="showModal('priceModal')">
					<view class="cuIcon-order">
						<view class="cu-tag badge bg-yellow2"></view>
					</view>
					最早出发
				</view>
				<view class="action" @click="showModal('faCheModal')">
					<view class="cuIcon-time"></view>
					发车时段
				</view>
			</view>
		</view>

		<!--价格,出发早晚,模态框-->
		<view class="cu-modal bottom-modal" :class="modalName=='priceModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="padding-lr-sm">
					<view class="cu-bar top-line" v-for="(price, index) in priceList" :key="index" :class="priceIndex==price.priceId ? 'text-orange2' : ''"
					 @click="priceClick(price.priceId)">
						<view>{{price.name}}</view>
						<view :class="priceIndex==price.priceId ? 'cuIcon-check' : ''"></view>
					</view>
				</view>
			</view>
		</view>

		<!--发车时段模态框-->
		<view class="cu-modal bottom-modal" :class="modalName=='faCheModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-gray">
					<view class="action text-orange2">确定</view>
					<view class="padding-lr-xl">
						<button class="cu-btn bg-white padding-lr50 text-orange2" @click="resetInterval">重置</button>
					</view>
					<view class="action text-orange2" @tap="hideModal">取消</view>
				</view>
				<view class="cu-bar bg-white top-line" v-for="(cond, index) in interval" :key="index" @click="intervalClick(cond.intervalId)">
					<view class="action">{{cond.name}}</view>
					<view class="action cuIcon-square font-size21 " :class="intervalIndex==cond.intervalId ? 'text-orange2 cuIcon-squarecheck' : ''"></view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	import searchItem from "../../components/searchItem.vue"
	export default {
		components: {
			searchItem
		},
		data() {
			return {
				endTime: this.$comm.getNextDate(15),
				startTime: this.$comm.formatDate(Date.now()),
				date: this.$comm.formatDate(Date.now()),
				priceList: [{
						priceId: 1,
						name: '最早出发'
					},
					{
						priceId: 2,
						name: '最晚出发'
					},
					{
						priceId: 3,
						name: '价格低到高'
					},
					{
						priceId: 4,
						name: '价格高到低'
					}
				],
				priceIndex: 0,
				scrollTopFlag: 0,
				showCond: '',
				modalName: '',
				// 筛选的tab
				intervalIndex: 0,
				interval: [{
						intervalId: 1,
						name: '上午 6:00-11:59'
					},
					{
						intervalId: 2,
						name: '下午 12:00-17:59'
					},
					{
						intervalId: 3,
						name: '晚上 18:00-23:59'
					},
					{
						intervalId: 4,
						name: '凌晨 00:00-05:59'
					}
				],
				orderInfo: null,
				speedList: [],
				speedListAll: []
			}
		},
		computed: {
			// 计算筛选的高度
			condHeight() {
				if (!this.conds || this.conds.length < 1) {
					return 55
				}
				let height = 0
				this.conds.forEach(cond => {
					height = (cond.item.length * 55) > height ? (cond.item.length * 55) : height
				})
				return height + 55
			},
			speedWeek() {
				let date = new Date(this.date)
				return "周" + "日一二三四五六".charAt(date.getDay());
			}
		},
		onLoad() {
			this.orderInfo = this.$store.getters.getOrderInfo
			this.getSpeedList()
		},
		methods: {
			getSpeedList() {
				this.$api.getSpeedList({ ...this.orderInfo
				}).then(res => {
					if (res.code) {
						this.speedList = res.data
						this.speedListAll = res.data
						this.priceIndex = 0
						this.intervalIndex = 0
					}
				})
			},
			DateChange(e) {
				this.date = e.detail.value
				this.orderInfo.speedDate = this.date
				this.getSpeedList()
			},
			// 隐藏modal
			hideModal(e) {
				this.modalName = null
			},
			// 显示某个modal
			showModal(modalName) {
				this.modalName = modalName
			},
			beforeDay() {
				let rootDate = this.$day(this.date).subtract(1, 'day')
				if ((rootDate.isBefore(this.endTime) && rootDate.isAfter(this.startTime)) || rootDate.isSame(this.endTime) ||
					rootDate.isSame(this.startTime)) {
					this.date = rootDate.format("YYYY-MM-DD")
					this.orderInfo.speedDate = this.date
					this.getSpeedList()
				} else {
					this.$comm.errorToShow("超过订票范围")
				}
			},
			nextDay() {
				let rootDate = this.$day(this.date).add(1, 'day')
				if ((rootDate.isBefore(this.endTime) && rootDate.isAfter(this.startTime)) || rootDate.isSame(this.endTime) ||
					rootDate.isSame(this.startTime)) {
					this.date = rootDate.format("YYYY-MM-DD")
					this.orderInfo.speedDate = this.date
					this.getSpeedList()
				} else {
					this.$comm.errorToShow("超过订票范围")
				}
			},
			priceClick(priceId) {
				this.priceIndex = priceId
				let speedList = this.speedList
				let speedListAll = this.speedListAll
				switch (priceId) {
					case 1:
						let earliest = speedListAll[0]
						speedListAll.forEach(speed => {
							if (this.$day(earliest.speedTime, "HH:mm").isAfter(this.$day(speed.speedTime, "HH:mm"))) {
								earliest = speed
							}
						})
						speedList = [earliest]
						break;
					case 2:
						let Latest = speedListAll[0]
						speedListAll.forEach(speed => {
							if (this.$day(Latest.speedTime, "HH:mm").isBefore(this.$day(speed.speedTime, "HH:mm"))) {
								Latest = speed
							}
						})
						speedList = [Latest]
						break;
					case 3:
						speedList = speedListAll
						speedList.sort((a, b) => {
							return Number(a.speedMon) - Number(b.speedMon)
						})
						break;
					case 4:
						speedList = speedListAll
						speedList.sort((a, b) => {
							return Number(b.speedMon) - Number(a.speedMon)
						})
						break;
					default:
						break;
				}
				this.speedList = speedList
			},
			intervalClick(intervalId) {
				this.intervalIndex = intervalId
				let speedList = this.speedList
				let speedListAll = this.speedListAll
				switch (intervalId) {
					case 1:
						speedList = speedListAll
						speedList = speedList.filter(item => {
							return this.$day(item.speedTime, "HH:mm").isSameOrAfter(this.$day("06:00", "HH:mm")) && this.$day(item.speedTime,
								"HH:mm").isBefore(this.$day("12:00", "HH:mm"))
						})
						break;
					case 2:
						speedList = speedListAll
						speedList = speedList.filter(item => {
							return this.$day(item.speedTime, "HH:mm").isSameOrAfter(this.$day("12:00", "HH:mm")) && this.$day(item.speedTime,
								"HH:mm").isBefore(this.$day("18:00", "HH:mm"))
						})
						break;
					case 3:
						speedList = speedListAll
						speedList = speedList.filter(item => {
							return this.$day(item.speedTime, "HH:mm").isSameOrAfter(this.$day("18:00", "HH:mm")) && this.$day(item.speedTime,
								"HH:mm").isBefore(this.$day("24:00", "HH:mm"))
						})
						break;
					case 4:
						speedList = speedListAll
						speedList = speedList.filter(item => {
							return this.$day(item.speedTime, "HH:mm").isSameOrAfter(this.$day("00:00", "HH:mm")) && this.$day(item.speedTime,
								"HH:mm").isBefore(this.$day("06:00", "HH:mm"))
						})
						break;
					default:
						break;
				}
				this.speedList = speedList
			},
			resetInterval() {
				this.intervalIndex = 0
				let speedList = this.speedListAll
				this.speedList = speedList
			},
			goSearchItem(speedInfo) {
				this.orderInfo.speedTime = speedInfo.speedTime
				this.$store.dispatch('saveOrderInfoAction', speedInfo)
				this.$comm.navigateTo("/pages/ItemDetail/ItemDetail")
			}
		},
		// 监听页面滚动
		onPageScroll(obj) {
			if (this.scrollTopFlag > obj.scrollTop) {
				this.showCond = 'show-cond'
			} else {
				this.showCond = 'hide-cond'
			}
			this.scrollTopFlag = obj.scrollTop
		},
	}
</script>

<style scoped>
	.hide-cond {
		transition-duration: 0.5s;
		bottom: -1000px;
	}

	.show-cond {
		transition-duration: 0.5s;
		bottom: 0px;
	}

	.scroll {
		overflow-y: auto;
		/*position: absolute;*/
		width: 100%;
	}

	.dian {
		width: 8px;
		height: 8px;
		border-radius: 100%;
		background-color: #ffdf40;
	}
</style>
